<template>
	<view style="background: #FFFFFF; width: 100%; padding: 0; margin: 0;">
		<!-- <view v-if="loading"></view> -->
		<canvas v-if="!tempFilePath" :canvas-id="CanvasID" :style="{ width: canvasW + 'px', height: canvasH + 'px', display: 'block' }"></canvas>
		<image v-else lazy-load :src="tempFilePath" mode="widthFix" style="width: 100%; display: block;" class="is-response" @longpress="toSave(tempFilePath)"></image>
	</view>
</template>

<script>
	var _this;
	export default {
		name: 'cc-poster',
		props: {
			CanvasID: {
				//CanvasID 等同于 canvas-id
				Type: String,
				default: 'PosterCanvas'
			},
			imgSrc: {
				//展示图
				Type: String,
				default: ''
			},
			QrSrc: {
				//二维码
				Type: String,
				default: ''
			},
			LogoSrc: {
				//左上角logo
				Type: String,
				default: ''
			},
			Title: {
				//文本内容
				Type: String,
				default: '省钱兄'
			},
			TitleColor: {
				//标题颜色
				Type: String,
				default: '#333333'
			},
			LineType: {
				//标题显示行数 大于两行是否省略	（注超出2行显示会导致画布布局絮乱）
				Type: [String, Boolean],
				default: true
			},
			showLongPressSaveTip: {
				//长按图片保存海报/海报生成失败
				Type: Boolean,
				default: false
			},
			// PriceTxt: {
			// 	//价格值
			// 	Type: String,
			// 	default: ''
			// },
			// PriceColor: {
			// 	//价格颜色
			// 	Type: String,
			// 	default: '#e31d1a'
			// },
			OriginalTxt: {
				//原价值
				Type: String,
				default: ''
			},
			OriginalColor: {
				//默认颜色（如原价与扫描二维码颜色）
				Type: String,
				default: '#b8b8b8'
			},
			Width: {
				//画布宽度  (高度根据图片比例计算 单位upx)
				Type: String,
				default: 750
			},
			CanvasBg: {
				//canvas画布背景色
				Type: String,
				default: '#ffffff'
			},
			Referrer: {
				//推荐人信息
				Type: String,
				default: '精选好物'
			},
			ViewDetails: {
				//描述提示文字
				Type: String,
				default: '长按或扫描识别二维码领券'
			}
		},
		data() {
			return {
				loading: false,
				tempFilePath: '',
				canvasW: 0,
				canvasH: 0,
				canvasImgSrc: '',
				ctx: null
			};
		},
		methods: {
			toSave(url) {
				console.log("长按开始");
				//#ifndef H5
				uni.getImageInfo({
					src: url,
					success: function(image) {
						console.log('图片信息：', JSON.stringify(image));
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								console.log('save success');
								uni.showToast({
									title: '海报已保存相册',
									icon: 'success',
									duration: 2000
								});
							}
						});
					}
				});
				//#endif
			},
			chongxie(){
				this.tempFilePath = ''
				this.ctx =  null
				// this.OnCanvas2();
				setTimeout(()=>{
					this.OnCanvas();
				},500)
			},
			async OnCanvas() {
				this.loading = true;
				
				_this.ctx = uni.createCanvasContext(_this.CanvasID, this);
				const C_W = uni.upx2px(_this.Width); // canvas宽度
				const C_P = uni.upx2px(30); // canvas Paddng 间距
				
				// 获取设备信息，计算合适的高度比例
				const systemInfo = uni.getSystemInfoSync();
				const screenWidth = systemInfo.windowWidth;
				const screenHeight = systemInfo.windowHeight;
				const screenRatio = screenHeight / screenWidth;
				
				// 获取图片信息
				let _imgInfo = await _this.getImageInfo({
					imgSrc: _this.imgSrc
				}); // 背景图
				
				let _QrCode = await _this.getImageInfo({
					imgSrc: _this.QrSrc
				}); // 二维码
				
				// 获取Logo图片信息（如果提供了Logo）
				let _logoInfo = null;
				if (_this.LogoSrc) {
					try {
						_logoInfo = await _this.getImageInfo({
							imgSrc: _this.LogoSrc
						}); // Logo图片
						console.log('Logo图片加载成功:', _logoInfo.width, 'x', _logoInfo.height);
					} catch (error) {
						console.error('Logo图片加载失败:', error);
					}
				}
				
				// 计算图片尺寸
				let r = [_imgInfo.width, _imgInfo.height];
				let q = [_QrCode.width, _QrCode.height];
				
				// 计算背景图尺寸，覆盖整个canvas
				let imgW = C_W;
				// 使用屏幕比例计算高度，确保与设备屏幕比例接近
				let imgH = C_W * 1.5; 
				
				if (r[0] != imgW) {
					r[1] = Math.floor((imgW / r[0]) * r[1]);
					r[0] = imgW;
				}
				
				// 设置canvas尺寸和显示倍率，提高清晰度
				_this.canvasW = C_W;
				_this.canvasH = imgH;
				
				// 设置绘制品质
				_this.ctx.setQuality && _this.ctx.setQuality('high');
				
				// 设置背景色
				_this.ctx.setFillStyle('#1678FF'); // 蓝色背景
				_this.ctx.fillRect(0, 0, C_W, _this.canvasH);
				
				// 绘制背景图
				_this.ctx.drawImage(_imgInfo.path, 0, 0, C_W, imgH);
				
				// 绘制Logo（如果有）
				if (_logoInfo) {
					// 计算Logo尺寸，控制在合理范围内
					const logoMaxWidth = C_W * 0.45; // Logo最大宽度为Canvas宽度的25%
					const logoMaxHeight = imgH * 0.22; // Logo最大高度为Canvas高度的12%
					
					let logoWidth = _logoInfo.width;
					let logoHeight = _logoInfo.height;
					
					// 如果Logo太大，按比例缩小
					if (logoWidth > logoMaxWidth) {
						const scale = logoMaxWidth / logoWidth;
						logoWidth = logoMaxWidth;
						logoHeight = logoHeight * scale;
					}
					
					if (logoHeight > logoMaxHeight) {
						const scale = logoMaxHeight / logoHeight;
						logoHeight = logoMaxHeight;
						logoWidth = logoWidth * scale;
					}
					
					// 在左上角绘制Logo，留出一定的边距
					const logoX = C_P*2.5;  // 左边距
					const logoY = C_P*5;  // 顶部边距
					
					_this.ctx.drawImage(_logoInfo.path, logoX, logoY, logoWidth, logoHeight);
				}
				
				// 计算白色背景框的位置和大小
				const boxMargin = C_P * 3; // 增大边距，使卡片宽度更窄
				const boxWidth = C_W - boxMargin * 2;
				
				// 计算二维码尺寸，将比例从60%改为70%，使二维码更大
				const qrSize = Math.floor(boxWidth * 0.85);
				const C_Q = qrSize; // 更新二维码尺寸
				
				// 计算二维码的合适尺寸，避免过度缩放导致模糊
				// 如果二维码原始尺寸足够大，就不要放大它
				let finalQrWidth = q[0];
				let finalQrHeight = q[1];
				let qrScaleFactor = 1;
				
				// 如果原始二维码足够大，只需要适当缩小到目标尺寸
				if (q[0] > C_Q) {
					qrScaleFactor = C_Q / q[0];
					finalQrWidth = C_Q;
					finalQrHeight = Math.floor(q[1] * qrScaleFactor);
				} 
				// 如果原始二维码较小但在可接受范围内(至少是目标尺寸的75%)，则使用原始尺寸
				else if (q[0] >= C_Q * 0.75) {
					finalQrWidth = q[0];
					finalQrHeight = q[1];
				} 
				// 只有当原始二维码过小时，才考虑放大
				else {
					finalQrWidth = C_Q;
					finalQrHeight = Math.floor(q[1] * (C_Q / q[0]));
					console.log('二维码尺寸过小，可能导致模糊，建议提高原始二维码分辨率');
				}
				
				// 调整白色背景框的高度，增加上下留白空间
				const boxHeight = finalQrHeight + C_P * 6.5; // 增加卡片高度，为文字留出更多空间
				const boxY = imgH * 0.35; // 将白色背景向上移动到图片33%的位置
				const boxRadius = 16; // 圆角
				
				// 绘制白色背景框（带圆角）
				_this.ctx.setFillStyle('#ffffff');
				_this.ctx.setShadow(0, 4, 12, 'rgba(0, 0, 0, 0.18)'); // 增强阴影效果
				
				// 绘制圆角矩形
				_this.ctx.beginPath();
				_this.ctx.moveTo(boxMargin + boxRadius, boxY);
				_this.ctx.arcTo(boxMargin + boxWidth, boxY, boxMargin + boxWidth, boxY + boxRadius, boxRadius);
				_this.ctx.arcTo(boxMargin + boxWidth, boxY + boxHeight, boxMargin + boxWidth - boxRadius, boxY + boxHeight, boxRadius);
				_this.ctx.arcTo(boxMargin, boxY + boxHeight, boxMargin, boxY + boxHeight - boxRadius, boxRadius);
				_this.ctx.arcTo(boxMargin, boxY, boxMargin + boxRadius, boxY, boxRadius);
				_this.ctx.closePath();
				_this.ctx.fill();
				
				_this.ctx.setShadow(0, 0, 0, '#ffffff'); // 重置阴影
				
				// 添加邀请码信息（在白色框内向下移动），减小文字大小
				_this.ctx.setFillStyle('#000000'); // 黑色文字
				_this.ctx.setFontSize(uni.upx2px(28)); // 减小字号
				_this.ctx.setTextBaseline('middle');
				_this.ctx.font = 'bold ' + uni.upx2px(28) + 'px sans-serif'; // 设置为粗体但更小
				const viewDetailsWidth = _this.ctx.measureText(_this.ViewDetails).width;
				const viewDetailsX = (C_W - viewDetailsWidth) / 2;
				_this.ctx.fillText(_this.ViewDetails, viewDetailsX, boxY + C_P * 2.5); // 调整展业码文字位置
				
				// 在白色背景框内居中绘制二维码
				const qrX = (C_W - finalQrWidth) / 2;
				const qrY = boxY + C_P * 3; // 增加上边距，为上方文字留出更多空间
				
				// 使用更高质量的绘制方式
				_this.ctx.imageSmoothingEnabled = true;
				_this.ctx.imageSmoothingQuality = 'high';
				_this.ctx.drawImage(_QrCode.path, qrX, qrY, finalQrWidth, finalQrHeight);
				
				// 添加"扫码加入"文本（在二维码下方），增大字体
				_this.ctx.setFillStyle('#000000');
				_this.ctx.setFontSize(uni.upx2px(35)); // 字号保持不变
				_this.ctx.font = 'bold ' + uni.upx2px(32) + 'px sans-serif'; // 设置粗体
				const scanText = '扫码加入卡拉灵动';
				const scanTextWidth = _this.ctx.measureText(scanText).width;
				const scanTextX = (C_W - scanTextWidth) / 2;
				_this.ctx.fillText(scanText, scanTextX, qrY + finalQrHeight + C_P * 0.8); // 增加二维码与文字间距
				
				// 延迟后渲染至canvas上
				setTimeout(function() {
					_this.ctx.draw(true, ret => {
						uni.hideLoading();
						_this.getNewImage();
					});
				}, 600);
			},
			async getImageInfo({
				imgSrc
			}) {
				return new Promise((resolve, errs) => {
					uni.getImageInfo({
						src: imgSrc,
						success: function(image) {
							resolve(image);
						},
						fail(err) {
							errs(err);
							if (!_this.showLongPressSaveTip) return
							uni.showToast({
								title: '海报生成失败',
								mask: false,
								duration: 2000,
								icon: "none"
							});
							uni.hideLoading()
						}
					});
				});
			},
			getNewImage() {
				uni.canvasToTempFilePath({
						canvasId: _this.CanvasID,
						quality: 1, // 最高质量
						fileType: 'png', // 使用PNG格式，更适合二维码
						destWidth: _this.canvasW * 2, // 输出图片宽度为canvas宽度的2倍
						destHeight: _this.canvasH * 2, // 输出图片高度为canvas高度的2倍
						complete: res => {
							_this.tempFilePath = res.tempFilePath;
							_this.$emit('success', res);
							_this.loading = false;
							if (!_this.showLongPressSaveTip) return
							uni.showToast({
								title: '长按图片保存海报',
								mask: false,
								duration: 2000,
								icon: "none"
							});
							uni.hideLoading();
						}
					},
					this
				);
			}
		},
		mounted() {
			_this = this;
			this.OnCanvas();
		}
	};
</script>

<style></style>
